<%@page import="java.awt.geom.Path2D"%>
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page language="java" import="common.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塗四格</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="static/global.css" />

</head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";


String Url=getServletContext().getRealPath("/");
String base64String="";
String FileUrl=CreatePicture.base64StringToImage(base64String,Url,basePath);
%>
<body>
<script>
function Saveit(){
	src='<%=basePath+"UpLoadFile/"+FileUrl+".png"%>';
temp.location=src;


//在隐藏帧中加载图片
//100毫秒后在id为temp的隐藏帧上执行saveas命令 
setTimeout('temp.document.execCommand("saveas")',100);
}
</script>
<iframe id="temp" style="display:none"></iframe>
<div id="header"></div>
<div id="wrap">
	<div id="workshop">
		<div id="preview" class="can_preview">
			<img src="<%=basePath+"UpLoadFile/"+FileUrl+".png"%>" />
		</div>
		<div id="send" class="send_panel">
			<form action="updateWeiboPic.jsp">
				<h2><span>你可以</span></h2>
				<a class="save_btn" href="##" onClick="Saveit()">保存到本地</a>
				<h2><span>還可以</span></h2>
				<p>發送到圍脖</p>
                <input type="hidden" name="weibopic" value="<%=Url+"UpLoadFile\\"+FileUrl+".png" %>"/>
				<p><textarea name="weiboText" class="textbox">#塗四格#我用它創建了四格漫哦！</textarea></p>
				<button type="submit" class="sendto_weibo">發送</button>
			</form>
		</div>
		<b class="arrow_pic"></b>
	</div>
</div>
<div id="footer"></div>
<script src="static/script.js"></script>
<script>
//extra
Element.prototype.hasClassName = function(_className) {
  return new RegExp("(?:^|\\s+)" + _className + "(?:\\s+|$)").test(this.className);
};
Element.prototype.addClassName = function(_className) {
  if (!this.hasClassName(_className)) {
    this.className = this.className ? [this.className, _className].join(' ') : _className;
  }
};
Element.prototype.removeClassName = function(_className) {
  if (this.hasClassName(_className)) {
    var c = this.className;
    this.className = c.replace(new RegExp("(?:^|\\s+)" + _className + "(?:\\s+|$)", "g"), "");
  }
};
//tabs
(function(){
	var setting = document.getElementById('setting');
	var tabs = setting.querySelectorAll('.tabs a');
	var conts = setting.querySelectorAll('.conts .cont');
	var switchCont = function(_e){
		_e.preventDefault();
		if(!this.hasClassName('current')){
			this.addClassName('current');
			for(var _i=0;_i<tabs.length;_i++){
				if(tabs[_i]==this){
					conts[_i].addClassName('current');
				}else{
					tabs[_i].removeClassName('current');
					conts[_i].removeClassName('current');
				}
			}
		}
	};
	for(var _i=0;_i<tabs.length;_i++){
		tabs[_i].addEventListener('click',switchCont);
	}
})();
//textbox focus
//(function(){
	var textboxes = document.querySelectorAll('#setting .conts .text .textbox');
	var changeBigbox = function(){
		var _sign = [], _current;
		for(var _i=0;_i<textboxes.length;_i++){
			if(textboxes[_i] == this){
				if(this.tagName.toLowerCase() == 'textarea') return;
				_current = _i+1;
				_sign.push(_i);
				_sign.push(_i+1);
			}else if(textboxes[_i].tagName.toLowerCase() == 'textarea' && textboxes[_i].style.display.toLowerCase() != 'none'){
				textboxes[_i-1].value = textboxes[_i].value;
				_sign.push(_i);
				_sign.push(_i-1);
			}
		}
		while(_sign.length>0){
			var _el = textboxes[_sign.shift()];
			_el.style.display = _el.style.display.toLowerCase() == 'none' ? '' : 'none';
		}
		textboxes[_current].focus();
	}
	for(var _i=0;_i<textboxes.length;_i++){
		textboxes[_i].addEventListener('focus',changeBigbox);
	}
//})();
</script>
</body>
</html>
